<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Happy New Year! - Metro 4 :: Popular HTML, CSS and JS library</title>
    <style>
        body {
            background: transparent url("../images/ny-2.jpg") center center no-repeat;
            background-size: cover;
            overflow: hidden;
        }

        .snowflake {
            background: white;
            border-radius: 50%;
            position: absolute;
        }

        .size-1 {
            width: 1px;
            height: 1px;
        }
        .size-2 {
            width: 2px;
            height: 2px;
        }
        .size-3 {
            width: 3px;
            height: 3px;
        }

        .w2021 {
            position: absolute;
            top: 150px;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: center;
            right: 0;
            left: 0;
        }

        .ts-2 {
            background: transparent url("../images/2snow.png") top left no-repeat;
        }

        .ts-0 {
            background: transparent url("../images/0snow.png") top left no-repeat;
        }

        .ts-1 {
            background: transparent url("../images/1snow.png") top left no-repeat;
        }

        .w2021 > * {
            text-indent: -99999px;
            background-size: contain!important;
            width: 200px;
            height: 200px;
            margin-left: -100px;
        }

        .w2021 > *:nth-child(1) {
            margin-left: 20px;
        }

        .sub {
            position: absolute;
            bottom: 4px;
            left: 0;
            right: 0;
            text-align: center;
            color: white;
            font-size: 64px;
            font-weight: 100;
        }

        .sub > *:not(.space) {
            display: inline-block;
            position: relative;
        }

        .sub > .space {
            width: 10px;
            display: inline-block;
        }

        #metro {
            display: flex;
            align-items: flex-start;
            position: relative;
            padding: 50px;
            justify-content: center;
            overflow: hidden;
        }
        #metro .char {
            display: inline-block;
            background: #ffffff;
            color: #282828;
            border-bottom: 4px coral solid;
            font-size: 48px;
            padding: 10px 8px 0;
            text-align: center;
            box-shadow: 2px 2px 4px #000;
            text-transform: uppercase;
            font-weight: bold;
            margin: 0 4px;
            position: relative;
            width: 64px;
            height: 80px;
            transform-origin: 50% 6px;
        }
        #metro .char::before {
            content: "";
            position: absolute;
            z-index: 2;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #39342e;
            left: 50%;
            top: 6px;
            margin-left: -4px;
        }
        #metro .char.te-odd {
            margin-top: 3px;
        }
        #metro .char.te-even {
        }
        #metro .ts-M {
            animation: skew 2s linear infinite;
        }
        #metro .ts-e {
            animation: skew-reverse 2.2s linear infinite;
        }
        #metro .ts-t {
            animation: skew 3s linear infinite;
        }
        #metro .ts-r {
            animation: skew-reverse 2.8s linear infinite;
        }
        #metro .ts-o {
            animation: skew-reverse 3.2s linear infinite;
        }
        #metro .ts-4 {
            animation: skew 1.9s linear infinite;
        }
        @keyframes skew {
            0% {
                transform: skew(-10deg, 10deg)
            }
            25% {
                transform: skew(0deg, 0deg)
            }
            50% {
                transform: skew(8deg, -8deg);
            }
            75% {
                transform: skew(0deg, 0deg);
            }
            100% {
                transform: skew(-10deg, 10deg)
            }
        }
        @keyframes skew-reverse {
            0% {
                transform: skew(8deg, -8deg)
            }
            25% {
                transform: skew(0deg, 0deg)
            }
            50% {
                transform: skew(-10deg, 10deg);
            }
            75% {
                transform: skew(0deg, 0deg);
            }
            100% {
                transform: skew(8deg, -8deg)
            }
        }
    </style>
</head>
<body class="m4-cloak h-vh-100">
    <div class="h-100" id="field">
        <div data-role="tokenizer" data-cls-token="char" id="metro">Metro 4</div>
        <div class="w2021" data-role="tokenizer">2021</div>
        <div class="sub" data-role="tokenizer">New Years Is Soon!</div>
    </div>

<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    function generateSnow(snowflakes){
        var snowflake;
        var field = $('#field');
        var fieldWidth = field.width(), fieldHeight = field.height();

        snowflakes = snowflakes || 40;

        for (var i = 0; i < snowflakes; i++) {
            snowflake = $("<div>").addClass("snowflake").addClass("size-" + ($.random(1, 3))).appendTo('#field');
            snowflake.css({
                left: $.random(0, fieldWidth - 1)
            });
            snowflake.animate({
                draw: {
                    top: [-100, $.random(100, fieldHeight)]
                },
                dur: $.random(3000, 10000),
                onDone: function(){
                    $(this).remove();
                }
            })
        }
    }


    $(function(){
        generateSnow();

        setInterval(function() {
            generateSnow();
        }, 3000);
    })
</script>
</body>
</html>
